<template>
    <div class="page help-article-page" ref="pageRef">
        <div class="page-container">
            <div class="page-title">
                <div class="left">
                    <div class="name">
                        {{ $route.meta.title }}
                    </div>
                    <SystemBreadcrumb />
                </div>
                <div class="search-box">
                    <a-input-search
                        width="460"
                        placeholder="请输文档名称"
                        enter-button
                        v-model:value="searchObj.title"
                        @search="search"
                    />
                </div>
                <a-button
                    type="primary"
                    @click="hdlOpen"
                    :icon="h(PlusOutlined)"
                    class="add"
                >
                    新建
                </a-button>
            </div>
            <div class="table-box">
                <div class="search-box">
                    <a-form layout="inline">
                        <a-form-item class="mb0" label="状态">
                            <a-select
                                :style="{ width: '100%' }"
                                v-model:value="searchObj.status"
                                placeholder="请选择"
                                :allowClear="true"
                                @change="search"
                            >
                                <a-select-option value="">
                                    全部
                                </a-select-option>
                                <a-select-option value="1">
                                    正常
                                </a-select-option>
                                <a-select-option value="98">
                                    停用
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-form>
                </div>
                <a-table
                    :columns="columns"
                    :data-source="lazyTable.data"
                    :pagination="lazyTable.pagination"
                    :loading="lazyTable.loading"
                    @change="handleTableChange"
                    size="small"
                    :row-class-name="
                    (_record:any, index:number) =>
                        index % 2 === 1 ? 'table-striped' : null
                "
                >
                    <template #bodyCell="{ column, record, text, index }">
                        <template v-if="column.dataIndex === 'updateTime'">
                            {{ dayjs(Number(text)).format("YYYY-MM-DD HH:mm") }}
                        </template>
                        <template v-if="column.dataIndex === 'status'">
                            <a-button
                                class="status-btn"
                                :class="[
                                    text == 1
                                        ? 'status-btn__success'
                                        : 'status-btn__error',
                                ]"
                                >{{ text == 1 ? "正常" : "停用" }}</a-button
                            >
                        </template>
                        <template v-if="column.dataIndex === 'btns'">
                            <div class="btns">
                                <a-button
                                    type="text"
                                    class="text__btn--primary"
                                    @click="hdlSeeDetail(record.id)"
                                >
                                    查看
                                </a-button>
                                <a-divider type="vertical" />
                                <a-button
                                    type="text"
                                    class="text__btn--primary"
                                    @click="hdlModify(record.id)"
                                >
                                    编辑
                                </a-button>
                                <a-divider type="vertical" />
                                <a-button
                                    type="text"
                                    class="text__btn--primary"
                                    @click="hdlRemove(record)"
                                >
                                    删除
                                </a-button>
                            </div>
                        </template>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
    <a-modal
        v-model:open="openDelete"
        title="确认删除"
        :getContainer="getContainer"
        :width="514"
        @ok="hdlConfirm"
    >
        <div>删除后不可恢复，请确认删除「{{ selItem.title }}」文档？</div>
    </a-modal>

    <HelpArticleManageEdit
        ref="helpArticleManageEditRef"
        @on-success="hdlEditSuccess"
    />
    <HelpArticleManageDetail ref="helpArticleManageDetailRef" />
</template>

<script setup lang="ts">
    import { h, nextTick, onMounted, ref } from "vue";
    import { useRouter, useRoute } from "vue-router";
    import { useLazyLable } from "@/hooks/useLazyLable";
    import helpArticleManageService from "@/service/helpArticleManage.service";
    import dayjs from "dayjs";
    import { PlusOutlined } from "@ant-design/icons-vue";
    import useGlobalStore from "@/stores/global.store";
    import { storeToRefs } from "pinia";
    import HelpArticleManageEdit from "../HelpArticleManageEdit/HelpArticleManageEdit.vue";
    import HelpArticleManageDetail from "../HelpArticleManageDetail/HelpArticleManageDetail.vue";
    import SystemBreadcrumb from "@/components/SystemBreadcrumb/SystemBreadcrumb.vue";
    const helpArticleManageEditRef = ref();
    const helpArticleManageDetailRef = ref();
    let { authApis } = storeToRefs(useGlobalStore());

    const openDelete = ref(false);

    const pageRef = ref();
    const router = useRouter();
    const route = useRoute();

    onMounted(() => {
        nextTick(() => {
            if (
                authApis.value.includes(helpArticleManageService.DETAIL) ||
                authApis.value.includes(helpArticleManageService.EDIT) ||
                authApis.value.includes(helpArticleManageService.REMOVE)
            ) {
                columns.value.push({
                    title: "操作",
                    dataIndex: "btns",
                    width: "220px",
                });
            }
        });
    });

    const hdlOpen = () => {
        helpArticleManageEditRef.value.toggleOpen();
    };
    const selItem = ref();
    const hdlRemove = (obj: any) => {
        selItem.value = obj;
        openDelete.value = true;
    };
    const hdlConfirm = async () => {
        try {
            let res = await remove(selItem.value.id);
        } finally {
            openDelete.value = false;
        }
    };

    const hdlModify = (id: string) => {
        helpArticleManageEditRef.value.toggleOpen(id);
    };

    const hdlSeeDetail = (id: string) => {
        helpArticleManageDetailRef.value.toggleOpen(id);
    };

    const hdlEditSuccess = () => {
        refresh();
    };

    // 列表
    const lazyTableStore = useLazyLable<typeof helpArticleManageService>(
        router,
        route,
        helpArticleManageService,
        undefined,
        "object",
        true,
        null,
    );
    const {
        lazyTable,
        searchObj,
        search,
        remove,
        handleTableChange,
        resetSearchObj,
        getPopupContainer,
        refresh,
    } = lazyTableStore;

    const columns = ref<any[]>([
        {
            title: "文档名称",
            dataIndex: "title",
        },
        {
            title: "状态",
            dataIndex: "status",
        },
        {
            title: "权重",
            dataIndex: "sort",
        },
        // {
        //     title: "创建人",
        //     dataIndex: "creator",
        // },
        {
            title: "更新时间",
            dataIndex: "updateTime",
        },
        {
            title: "操作",
            dataIndex: "btns",
            width: "220px",
        },
    ]);

    const getContainer = () => {
        return pageRef.value;
    };
</script>

<style lang="scss" scoped src="./HelpArticleManage.scss"></style>
